<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>

    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/main-header.css" rel="stylesheet">
    <link href="/css/main-orderForm-tab.css" rel="stylesheet">
    <style>
    </style>
</head>

<body>

    <% include main-header.ejs %>
        <div class="main1">
            <div class="main-center clearfix">


                <div id="leftTabBox" class="tabBox">
                    <div class="hd">
                        <ul>
                            <% for (var i = 0, len = orderFormTypeList.length; i < len; i++) { %>
                            <li><a href="#"><%= orderFormTypeList[i] %></a></li>
                            <% } %>
                        </ul>
                    </div>
                    <div class="bd">
                        <% for (var i = 0, len = orderFormTypeList.length; i < len; i++) { %>
                        <div class="con">
                            <ul>
                                <p class="ajax-status-no">正在加载</p>
                            </ul>
                        </div>
                        <% } %>
                    </div>
                </div>


            </div>
        </div>

        <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="/lib/TouchSlide.1.1.js"></script>


        <script src="/js/main-header.js"></script>


        <script>

            $(document).ready(function() {


                // 滑动选项卡部分
                var
                    viewport_Height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,  // 视口高度
                    viewport_Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,  // 视口宽度
                    o_tabBox_hd_ul = document.querySelector(".tabBox .hd ul"),  // 滑块标签栏
                    a_tabBox_hd_ul_li = document.querySelectorAll(".tabBox .hd ul li");  // 滑块标签组


                var o_tabBox_hd_ul_width = 10;  // 滑块标签栏宽度，默认有 10 的余量
                for (var i = 0, len = a_tabBox_hd_ul_li.length; i < len; i++){
                    o_tabBox_hd_ul_width += a_tabBox_hd_ul_li[i].offsetWidth;
                }
                o_tabBox_hd_ul.style.width = o_tabBox_hd_ul_width + "px";

                // 初始化滑动选项卡
                TouchSlide({
                    slideCell: "#leftTabBox",
                    effect: "leftLoop",  // 左循环滑动
                    startFun: function(i,c){  // i 为当前页（从0开始），c 为总页数

                        if ( i > 2 && i < ( c - 3 ) ) {  // 滑倒第4个标签开始动
                            // 滑动距离，60为一个标签的大概宽度，，-2 要保证前面还能显示2个标签
                            o_tabBox_hd_ul.style.cssText += " ;transform: translateX(-" + ( (i - 2) * 60 ) + "px)";
                        }
                        if ( i >= ( c - 3 ) ) {  // 滑到最后三个标签，，平移到最大
                            // 最大滑动距离，滑块标签栏宽度 - 浏览器视口宽度
                            o_tabBox_hd_ul.style.cssText += " ;transform: translateX(-" + ( o_tabBox_hd_ul_width - viewport_Width ) + "px)";
                        }
                        if ( i < 3 ) {  // 滑到前三个标签，，平移归零
                            o_tabBox_hd_ul.style.cssText += " ;transform: none";
                        }


                        // console.log(i)
                        var orderFormTypeList = "<%= orderFormTypeList %>".split(",");  // 把字符串转为数组
                        // console.log(orderFormTypeList[i])

                        // 请求数据
                        getOrderFormList(orderFormTypeList[i], i);
                    },
                    endFun: function(i){ //高度自适应
                        var bd = document.querySelector(".bd");
                        // 该滑动插件会在滑动ul的最前面和最后面各添加一个ul，所以ul索引往后推1
                        var objHeight = bd.children[i+1].children[0].offsetHeight  // 当前选项卡内容高度

                        // 选项卡头部+公共头部 = 100
                        if ((objHeight + 100) < viewport_Height) {  // 当前选项卡内容高度+选项卡头部+公共头部 比视口高度小
                            bd.parentNode.style.height = (viewport_Height - 100 ) + "px";
                        } else {
                            bd.parentNode.style.height = objHeight + "px";
                        }
                    }

                });


                // 订单条目展开收起
                $(".bd ul").on('click', 'div.orderForm-simple', function(){
                    var $this_item = $(this).parent("div.orderForm-item"),
                        $this_detail = $(this).siblings("div.orderForm-detail"),
                        $detail_status = $this_detail.css("display");

                    // console.log($detail_status)

                    if ( $detail_status === "none" ) {
                        // 展开前，所有条目细节收起
                        $("div.orderForm-detail").css({ "display": "none"});
                        $this_detail.css({ "display": "block"});


                    } else if ( $detail_status === "block" ) {
                        $this_detail.css({ "display": "none"});
                    }

                });


                // 请求数据


                    function getOrderFormList(of_type, of_type_index) {
                        $.post("<%= findUrl %>", {
                            <% if (findObj === "") { %>
                            "findObj": '{' +
                            '"of_type": "' + of_type + '"' +
                            '}'
                            <% } else { %>
                            "findObj": '{' +
                            '"<%= findObj.key %>": "<%= findObj.value %>",' +
                            '"of_type": "' + of_type + '"' +
                            '}'
                            <% } %>
                        }, function(result) {

                            // console.log(result)

                            var orderFormList = "";  // 保存此次请求的订单列表

                            iterator(0);

                            function iterator(i) {
                                if (i === result.length) { // 迭代结束
                                    //在这里写迭代结束后的内容
                                    return;
                                }
                                // if (i === result.length) { // 迭代结束
                                //     //在这里写迭代结束后的内容
                                //     return;
                                // }

                                // var color = "#ffffaa";
                                //
                                // // 如果该历史时间在当前时间60s前
                                // if (result[i].joinTimestamp < parseInt(new Date().getTime() / 1000) - 60 * 10) {
                                //     color = "none";
                                // }


                                // 组装模版

                                if ("<%= mark %>" === "undoneOrderForm") {
                                    var orderForm =
                                        '<div class="orderForm-item">' +
                                        '<div class="orderForm-simple clearfix">' +
                                        '<span><i>收件人：</i>' + result[i].of_name + '</span>' +
                                        '<span><i>尾号：</i>' + result[i].of_tailNumber + '</span>' +
                                        '<span><i>取货码：</i>' + result[i].of_number + '</span>' +
                                        '<span><i>状态：</i>' + result[i].of_status + '</span>' +
                                        '</div>' +
                                        '<div class="orderForm-detail clearfix">' +
                                        '<span>' + timestampToTime(result[i].joinTimestamp) + '</span>' +
                                        '<span><i>手机：</i><a href="tel:' + result[i].of_phone + '">' + result[i].of_phone + '</a></span>' +
                                        '<span><i>QQ：</i>' + result[i].username + '</span>' +
                                        '<span><i>地址：</i>' + result[i].of_address + '</span>' +
                                        '<span><i>支付：</i>' + result[i].of_payType + '</span>' +
                                        '<span><i>备注：</i>' + result[i].of_note + '</span>' +
                                        '<span><a class="orderForm-btn orderForm-btn-red" href="tel:' + result[i].of_phone + '">' + 'Call' + '</a></span>' +
                                        '<span><a class="orderForm-btn orderForm-btn-green" href="/orderFormStatus/' + result[i]._id + '">' + 'Done' + '</a></span>' +
                                        '</div>' +
                                        '</div>';
                                } else if ("<%= mark %>" === "myOrderForm") {
                                    var orderForm =
                                        '<div class="orderForm-item">' +
                                        '<div class="orderForm-simple clearfix">' +
                                        '<span><i>收件人：</i>' + result[i].of_name + '</span>' +
                                        '<span><i>尾号：</i>' + result[i].of_tailNumber + '</span>' +
                                        '<span><i>取货码：</i>' + result[i].of_number + '</span>' +
                                        '<span><i>状态：</i>' + result[i].of_status + '</span>' +
                                        '</div>' +
                                        '<div class="orderForm-detail clearfix">' +
                                        '<span>' + timestampToTime(result[i].joinTimestamp) + '</span>' +
                                        '<span><i>手机：</i><a href="tel:' + result[i].of_phone + '">' + result[i].of_phone + '</a></span>' +
                                        '<span><i>QQ：</i>' + result[i].username + '</span>' +
                                        '<span><i>地址：</i>' + result[i].of_address + '</span>' +
                                        '<span><i>支付：</i>' + result[i].of_payType + '</span>' +
                                        '<span><i>备注：</i>' + result[i].of_note + '</span>' +
                                        '<span><a class="orderForm-btn orderForm-btn-green">' + '' + '</a></span>' +
                                        '<span><a class="orderForm-btn orderForm-btn-red" href="/orderFormDelete/' + result[i]._id + '">' + 'Delete' + '</a></span>' +
                                        '</div>' +
                                        '</div>';
                                } else {
                                    var orderForm =
                                        '<div class="orderForm-item">' +
                                        '<div class="orderForm-simple clearfix">' +
                                        '<span><i>收件人：</i>' + result[i].of_name + '</span>' +
                                        '<span><i>尾号：</i>' + result[i].of_tailNumber + '</span>' +
                                        '<span><i>取货码：</i>' + result[i].of_number + '</span>' +
                                        '<span><i>状态：</i>' + result[i].of_status + '</span>' +
                                        '</div>' +
                                        '<div class="orderForm-detail clearfix">' +
                                        '<span>' + timestampToTime(result[i].joinTimestamp) + '</span>' +
                                        '<span><i>手机：</i><a href="tel:' + result[i].of_phone + '">' + result[i].of_phone + '</a></span>' +
                                        '<span><i>QQ：</i>' + result[i].username + '</span>' +
                                        '<span><i>地址：</i>' + result[i].of_address + '</span>' +
                                        '<span><i>支付：</i>' + result[i].of_payType + '</span>' +
                                        '<span><i>备注：</i>' + result[i].of_note + '</span>' +
                                        '</div>' +
                                        '</div>';
                                }


                                orderFormList += orderForm;



                                // 执行下一次循环
                                iterator(i + 1);
                            }

                            orderFormList += '<p class="ajax-status-ok">加载完毕</p>';
                            // 该滑动插件会在滑动ul的最前面和最后面各添加一个ul，所以ul索引往后推1
                            $(".bd ul:eq(" + ( of_type_index + 1 ) + ")").html($(orderFormList));

                        })
                    }


            })


            function timestampToTime(timestamp) {
                var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                Y = date.getFullYear() + '-';
                M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                D = date.getDate() + ' ';
                h = date.getHours() + ':';
                m = date.getMinutes() + ':';
                s = date.getSeconds();
                return Y + M + D + h + m + s;
            }

        </script>
</body>

</html>